class Zoom {
    constructor(){
        this.box = document.getElementById("detail-Mmain-L");
        this.Midarea = document.getElementById("Midarea");
        this.Midimg = this.Midarea.children[0];
        this.Zoom = document.getElementById("zoom");
        this.Bigarea = document.getElementById("Bigarea");
        this.Bigimg = this.Bigarea.children[0];
        this.init();
    }
    init() {
        this.Midarea.onmouseover = () => {
            this.Zoom.style.display = "block";
            this.Bigarea.style.display = "block";
        }
        this.Midarea.onmouseout = () => {
            this.Zoom.style.display = "none";
            this.Bigarea.style.display = "none";
        }
        this.Midarea.onmousemove = (e) => {
            let evt = e || window.event;
            let x = evt.pageX - this.box.offsetLeft - this.Zoom.offsetWidth / 2;
            let y = evt.pageY - this.box.offsetTop - this.Zoom.offsetHeight / 2;
            let mx = this.Midarea.offsetWidth - this.Zoom.offsetWidth;
            let my = this.Midarea.offsetHeight - this.Zoom.offsetHeight;

            x = x <= 0 ? 0 : x >= mx ? mx : x;
            y = y <= 0 ? 0 : y >= my ? my : y;

            this.Zoom.style.left = x + "px";
            this.Zoom.style.top = y + "px";
            //大图移动
            this.Bigimg.style.left = -this.Zoom.offsetLeft * (this.Bigimg.offsetWidth / this.Midarea.offsetWidth) + "px";
            this.Bigimg.style.top = -this.Zoom.offsetTop * (this.Bigimg.offsetHeight / this.Midarea.offsetHeight) + "px";

        }
}
}